<!--- 轮播图：全横屏展示 --->
<!--- data-bs-ride="carousel"：自动轮播 data-bs-interval="2000"：时间间隔 --->
<div id="heroCarousel" class="carousel slide hero-carousel custom-carousel py-5" data-bs-ride="carousel"
     data-bs-interval="2000">
    <!-- 指示器 -->
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active" aria-current="true"
                aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>


    <!-- 轮播内容 -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://picsum.photos/seed/hero1/1200/500" alt="年度社交峰会现场" class="carousel-img">
            <div class="carousel-caption d-none d-md-block">
                <h3 class="carousel-title">2023年度社交峰会圆满结束</h3>
                <p class="carousel-text">超过5000名用户参与，探讨社交网络的未来发展与创新方向，共同见证平台新功能发布。</p>
                <button class="btn btn-primary">查看详情</button>
                <div class="carousel-user">
                    <img src="https://picsum.photos/100/100?random=101" class="carousel-avatar" alt="李明的头像">
                    <span class="carousel-username">李明 · 旅行摄影师</span>
                    <div class="meta-item">
                        <i class="far fa-user"></i>
                        <span>陈明亮</span>
                    </div>
                    <div class="meta-item">
                        <i class="far fa-clock"></i>
                        <span>2023-06-10</span>
                    </div>
                    <div class="meta-item">
                        <i class="far fa-eye"></i>
                        <span>8.5k 阅读</span>
                    </div>
                </div>

            </div>
        </div>

        <div class="carousel-item">
            <img src="https://picsum.photos/seed/hero2/1200/500" alt="社区公益活动" class="carousel-img">
            <div class="carousel-caption d-none d-md-block">
                <h3 class="carousel-title">社区公益活动月正式启动</h3>
                <p class="carousel-text">参与社区公益活动，累积公益时长可兑换专属勋章和平台特权，让我们一起传递正能量。</p>
                <button class="btn btn-primary">立即参与</button>
                <div class="carousel-user">
                    <div class="carousel-avatar"
                         style="background-color: #E8F3FF; display: flex; align-items: center; justify-content: center; color: #165DFF; font-weight: 600;">
                        王
                    </div>
                    <span class="carousel-username">王芳 · 城市探索者</span>
                    <div class="meta-item">
                        <i class="far fa-user"></i>
                        <span>林小雨</span>
                    </div>
                    <div class="meta-item">
                        <i class="far fa-clock"></i>
                        <span>2023-06-08</span>
                    </div>
                    <div class="meta-item">
                        <i class="far fa-eye"></i>
                        <span>5.2k 阅读</span>
                    </div>
                </div>

            </div>
        </div>

        <div class="carousel-item">
            <img src="https://picsum.photos/seed/hero3/1200/500" alt="新功能上线" class="carousel-img">
            <div class="carousel-caption d-none d-md-block">
                <h3 class="carousel-title">全新社交互动功能上线</h3>
                <p class="carousel-text">引入实时互动、内容共创等新功能，让你的社交体验更加丰富多元，连接更紧密。</p>
                <button class="btn btn-primary">了解新功能</button>
                <div class="carousel-user">
                    <img src="https://picsum.photos/100/100?random=103" class="carousel-avatar" alt="张伟的头像">
                    <span class="carousel-username">张伟 · 甜点师</span>
                    <div class="meta-item">
                        <i class="far fa-user"></i>
                        <span>王书城</span>
                    </div>
                    <div class="meta-item">
                        <i class="far fa-clock"></i>
                        <span>2023-06-05</span>
                    </div>
                    <div class="meta-item">
                        <i class="far fa-eye"></i>
                        <span>3.8k 阅读</span>
                    </div>
                </div>

            </div>
        </div>
    </div>


    <!-- 控制按钮 -->
    <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

